<template>
  <div class="box">
    <van-nav-bar
      fixed
      placeholder
      safe-area-inset-top
      title="设置"
      @click-left="back"
    >
      <template #left>
        <van-icon name="arrow-left" size="16px" color="#333" />
      </template>
    </van-nav-bar>
    <div>
      <div class="btn">
        <van-button @click="show = true" type="warning" round >退出登录</van-button>
      </div>
    </div>
    <van-action-sheet
      v-model="show"
      :actions="actions"
      cancel-text="取消"
      description=""
      close-on-click-action
      @select="onSelect"
    />
  </div>
</template>

<script>
import { _local } from "@/utils/storage";

export default {
  data() {
    return {
      show: false,
      actions: [{ name: "退出登录" }],
    };
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    onSelect() {
      _local.clear()
      this.$router.push('/login');
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  background-color: #eee;
  height: 100%;
  .cut {
    height: 10px;
  }
  .btn {
    text-align: center;
    position: fixed;
    bottom: 40px;
    width: 92%;
    margin: 0 15px;
    .van-button {
      display: block;
      width: 100%;
      font-size: 16px;
    }
  }
}
</style>
